<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>顶部导航</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .topBar{
            background-color: #ECECEC;
            height: 30px;
        }
        .container {
            width: 1190px;
            /*版心最好不给高度，用内容撑开，否则多个版心不行*/
            margin: 0 auto;
        }

        .leftfix {
            float: left;
        }

        .rightfix {
            float: right;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .topBar .container .hello {
            height: 30px;
            line-height: 30px;
            font-size: 0;

        }
        .topBar .container .nav{
            height: 30px;
            line-height: 30px;
        }
        .topBar .container .hello span{
            font-size: 12px;
            color: #666666;
        }
        .welcome{
            margin-right: 28px;

        }
        .topBar .container .hello a{
            font-size: 12px;
            color: #666666;
        }
        .login{
            padding-right: 10px;
            border-right: 1px solid #666666;
        }
        .register{
            padding-left: 10px;
        }


        .list {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
        }
        .list a{
            color: #666666;
        }
        .list li{
            float: left;
        }
        .list li a {
            padding-left: 15px;
            padding-right: 15px;
            border-right: 1px solid #666666;
        }
        .list li:first-child a{
            padding-left: 0;
        }
        .list li:last-child a {
            padding-right: 0;
            border: 0;
        }
    </style>
</head>
<body>
<div class="topBar">
    <div class="container clearfix">
        <div class="leftfix hello">
            <span class="welcome">尚品汇欢迎你</span>
            <span>请</span>
            <a href="#" class="login">登录</a>
            <a href="#" class="register">免费注册</a>

        </div>
        <div class="rightfix nav">
            <ul class="list">
                <li><a href="#">我的订单</a></li>
                <li><a href="#">我的购物车</a></li>
                <li><a href="#">我的尚品汇</a></li>
                <li><a href="#">尚品汇会员</a></li>
                <li><a href="#">企业采购</a></li>
                <li><a href="#">关注尚品汇</a></li>
                <li><a href="#">合作招商</a></li>
                <li><a href="#">商家后台</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>